<template>
  <div class="app-container">
<!--    {{id}}-->
    <el-form ref="form" :model="novel" label-width="80px">
      <el-form-item label="书名">
        <el-input v-model="novel.bookName"  style="width: 217px;" ></el-input>
      </el-form-item>

      <el-form-item label="作者">
        <el-input v-model="novel.author"  style="width: 217px;" ></el-input>
      </el-form-item>
      <el-form-item label="简介">
        <el-input v-model="novel.introduce"  style="width: 217px;" ></el-input>
      </el-form-item>

<!--      <el-form-item label="阅读量">-->
<!--        <el-input v-model="novel.read"  style="width: 217px;" ></el-input>-->
<!--      </el-form-item>-->


<!--      <el-form-item label="书籍状态">-->
<!--        <el-select v-model="intestate" placeholder="请选择">-->
<!--          <el-option-->
<!--            v-for="item in options"-->
<!--            :key="item.intestate"-->
<!--            :label="item.category"-->
<!--            :value="item.intestate">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="会员">-->
<!--        <el-select v-model="vip" placeholder="请选择">-->
<!--          <el-option-->
<!--            v-for="item in options"-->
<!--            :key="item.vip"-->
<!--            :label="item.category"-->
<!--            :value="item.vip">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->

      <el-form-item label="书籍状态">
        <el-select v-model="book.intestate" placeholder="请选择">
          <el-option label="上架" value="1" />
          <el-option label="下架" value="2" />
        </el-select>
      </el-form-item>

      <el-form-item label="会员">
        <el-select v-model="book.vip" placeholder="请选择">
          <el-option label="普通书籍" value="1" />
          <el-option label="vip书籍" value="2" />
        </el-select>
      </el-form-item>

      <!--     图片上传-->
      <el-form-item label="头像">
        <el-upload
          action
          list-type="picture-card"
          :auto-upload="false"
          :file-list="fileList"
          :limit="1"
          :on-change="changeImg"
          :on-remove="removeImg"
          margin-left="20px"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>


      <el-form-item>
<!--        给修改前加上一个判断条件 是否需要修改-->
        <el-button type="primary" @click="onSubmit">修改</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>



  </div>
</template>

<style>
  /*#app{*/
  /*  text-align: left;*/
  /*}*/
  .el-form{
    float: left;
  }
</style>

<script>
import axios from "axios";

export default {
  name: "roleEditView",
  data(){       //data:{}
    return {
      user:{
        id:'',
        username:'',
      },
      novel:{
        id:'',
      },
      //选取文件的数组
      fileList:[
        {
          name: '',
          url: '',
        }
      ],
      // options:[],
      // category:'',
      book:{
        intestate:'',
        vip:'',
      },
      datas:{
        intestate:'',
        vip:'',
      },
      // options:[],
      // intestate:'',
      //
      // bookId:0,
      // vipId:0,
      // bookshelf:1,
    }
  },
  //获取数据
  created(){
    //通过this.$route.query.id获取当前路由参数中的id值
    this.novel.id=parseInt(this.$route.query.id)
    axios({
      url: '/api/book/queryById/'+this.novel.id,
      method: 'post',
      headers:{"Authorization":"Bearer "+this.$store.state.user.token}
    }).then(res => {
      console.log(res.data.data)
      // this.user.username=res.data.data[0].username
      this.novel=res.data.data
      //(1)直接将查询到的书籍状态intestate (int) 赋值给  bookId
      this.bookId=this.novel.intestate
      //(2)直接将查询到的会员状态vip (int) 赋值给  bookId
      this.vipId=this.novel.vip

        if(this.novel.intestate==1){
        this.book.intestate='上架'
      }else if(this.novel.intestate==2){
        this.book.intestate='下架'
      }

      if(this.novel.vip==1){
        this.book.vip='普通书籍'
      }else if(this.novel.vip==2){
        this.book.vip='vip书籍'
      }

      this.fileList[0].name="files"

      this.fileList[0].url="/api"+res.data.data.path
    })

    //获取用户的id
    var formData = new FormData();
    formData.append("username", this.$store.state.user.name)
    axios({
      //根据用户名查询用户的个人信息
      url: '/api/user/queryUser',
      method: 'post',
      data: formData,
      headers:{"Authorization":"Bearer "+this.$store.state.user.token}
    }).then(res => {
      this.user=res.data.data
    })


  },

  methods:{
    //修改数据
    onSubmit(){
      //创建表单对象
      // var formData = new FormData();
      //创建表格对象
      var formData = new window.FormData()
      //回显查询到的数据不改变
      if(this.book.intestate=="上架"){
        this.datas.intestate=1
        formData.append("intestate",this.datas.intestate)
      }else if(this.book.intestate=="下架"){
        this.datas.intestate=2
        formData.append("intestate",this.datas.intestate)
      }
      if(this.book.vip=="普通书籍"){
        this.datas.vip=1
        formData.append("vip",this.datas.vip)
      }else if(this.book.vip=="vip书籍"){
        this.datas.vip=2
        formData.append("vip",this.datas.vip)
      }
      formData.append("intestate",this.book.intestate)
      formData.append("vip",this.book.vip)

      //改变数据


      for (const arr in this.novel) {
        formData.append(arr, this.novel[arr])
      }
      // //添加加入书架的状态
      // formData.append("bookshelf",this.bookshelf)
      // 将fileList中的文件添加到formData中 循环添加文件对象中的raw 后台接收的二进制
      for (const key in this.fileList) {
        formData.append("files",this.fileList[key].raw)
      }
        formData.append("userId",this.user.id)

      this.$confirm('是否确定修改?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        axios({
          url:"/api/book/update/"+this.novel.id,
          method:"post",
          data:formData,
          //添加请求头
          // headers:{"Content-Type":"multipart/form-data"}
          headers:{
            "Authorization":"Bearer "+this.$store.state.user.token,
            "Content-Type":"multipart/form-data"
          }
        }).then(res=>{
          if(res.data.code==1){
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            //返回小说管理表
            this.$router.push("/novel/bookView")
          }else {
            this.$message({
              message: res.data.message,
              type: 'error'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });


    },
    cancel(){
      this.$router.push("/novel/bookView")
    },
    //删除文件
    removeImg(file){
      //根据uid删除对应的文件
      for (const key in this.fileList) {
        if (this.fileList[key].uid === file.uid) {
          this.fileList.splice(key, 1)
        }
      }
    },
    //添加图片
    changeImg(file){
      //直接将文件添加到数组中
      this.fileList.push(file)
      console.log("添加"+file.name)
    },


  }

}
</script>

<style scoped>

</style>
